<template>
    <view class="main">
        <view className="avatar">
            <image className="avatar-item" v-for="(item, index) in data" :src="item.avatar" mode="aspectFill" />
        </view>

    </view>
</template>

<script setup>
const props = defineProps({
    data: Array
})
</script>

<style lang="scss" scoped>
.avatar {
    display: flex;
}

.avatar-item {
    height: 45px;
    width: 45px;
    border-radius: 100%;

    &:not(:first-child) {
        // 只需要加这行代码就能搞定
        margin-left: -24px;
    }
}
</style>